<template>
  <a-modal
    v-model:visible="visible"
    :width="700"
    title="面料颜色查询"
    @cancel="cancel"
    @ok="submit"
  >
    <a-row style="margin-top: 20; margin-bottom: 20px">
      <a-input-search
        v-model:value="params"
        placeholder="搜索"
        enter-button
        style="width: 50%"
        @search="initStore"
      />
    </a-row>
    <a-table
      :columns="columns"
      :data-source="dataSoure"
      row-key="id"
      :row-selection="{ onChange: onChange, selectedRowKeys: selectedKeys }"
    >
      <template #colorUrl="{ text }">
        <img :src="text" width="40" height="20" VViewImage />
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import { computed, toRefs, reactive, onMounted } from 'vue'
import { color_list_post } from 'server/modules/2482.js'
import { message } from 'ant-design-vue'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isLb: {
      type: Number || null,
      default: null
    }
  },
  emits: ['submitColor', 'close'],
  setup(props, { emit }) {
    const state = reactive({
      params: null,
      columns: [
        {
          dataIndex: 'colorNum',
          title: 'CUPSHE Color Number'
        },
        {
          dataIndex: 'pantoneColorNum',
          title: 'PANTONE Color Number'
        },
        {
          dataIndex: 'colorUrl',
          title: 'image',
          slots: { customRender: 'colorUrl' }
        },
        {
          dataIndex: 'nameC',
          title: 'Color name_C'
        },
        {
          dataIndex: 'nameE',
          title: 'Color name_E'
        }
      ],
      dataSoure: [],
      selectedRows: [],
      selectedKeys: []
    })
    const visible = computed(() => {
      return props.value
    })
    const methods = {
      async initStore() {
        const params = {}
        if (state.params) {
          params.param = state.params.trim()
        }
        if (state.isLb) {
          params.isLb = state.isLb
        }
        const result = await color_list_post(params)
        state.dataSoure = result.data.list
      },
      cancel() {
        emit('close')
      },
      onChange(keys, rows) {
        state.selectedRows = rows
        state.selectedKeys = keys
      },
      clearSelect() {
        state.selectedRows = []
        state.selectedKeys = []
      },
      submit() {
        if (state.selectedRows.length > 1) {
          message.info('请选择不多于一条的数据')
        } else {
          emit('submitColor', state.selectedRows)
          methods.cancel()
        }
      }
    }
    onMounted(() => {
      methods.initStore()
    })
    return {
      visible,
      ...methods,
      ...toRefs(state)
    }
  }
}
</script>
